<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
			width: 80%;
			height: 600px;
			background: #000;
			margin:20px auto;
			position: relative;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}
    </style>
</head>
<body>
    <div id="container"></div>
</body>
<script src="../move.js"></script>
<script>
        class Fire{
            constructor(aaa){
                this.aaa = aaa;
                this.createEle();
            }
            createEle(){
                this.ele = document.createElement("div");
                this.ele.className = "fire";
                this.ele.style.background = randomColor();
                this.ele.style.left = this.aaa.x + "px";
                this.aaa.cont.appendChild(this.ele);
                this.move()
            }
            move(){
                move(this.ele, {
                    top: this.aaa.y
                },()=>{
                    this.ele.remove()
                    const num = random(10, 20);
                    for(let i=0;i<num;i++){
                        new SmallFire(this.aaa);
                    }
                })
            }
        }

        class SmallFire{
            constructor(bbb){
                this.bbb = bbb;
                this.createEle()
            }
            createEle(){
                this.ele = document.createElement("div");
                this.ele.className = "small-fire";
                this.ele.style.background = randomColor();
                this.ele.style.left = this.bbb.x + "px";
                this.ele.style.top = this.bbb.y + "px";
                this.bbb.cont.appendChild(this.ele);
                this.move()
            }
            move(){
                // 随机步长：负，向左向上；正，向右向下
                let speedX = random(-10, 10);
                let speedY = random(-20, 10);

                // 开启计时器
                this.t = setInterval(()=>{
                    // 随着计时器的执行，垂直的步长，不断增加，实现重力加速效果
                    speedY++;
                    // 如果元素超出了容器
                    if(this.ele.offsetTop >= this.bbb.cont.offsetHeight){
                        // 清除计时器
                        clearInterval(this.t);
                        // 并删除元素
                        this.ele.remove();
                    }else{
                        // 根据步长，持续运动
                        this.ele.style.left = this.ele.offsetLeft + speedX + "px";
                        this.ele.style.top = this.ele.offsetTop + speedY + "px";
                    }

                }, 30);
            }
        }

        const cont = document.getElementById("container");
        cont.onclick = function(eve){
            const e = eve || window.event;
            new Fire({
                x: e.offsetX,
                y: e.offsetY,
                cont: this
            });
        }

    function random(a,b){
        return Math.round(Math.random()*(a-b)+b);
    }
    function randomColor(){
        return `rgb(${random(100,255)},${random(100,255)},${random(100,255)})`;
    }
</script>
</html>